<template>
	<div class="layout-padding">
		<div class="layout-padding-auto layout-padding-view">
			<el-row :gutter="24">
				<el-form :inline="true" :model="state.queryForm" @keyup.enter="getDataList" ref="queryRef" label-width="70px">
					<el-form-item label="IMEI" prop="imei">
						<!-- <el-select
							v-model="state.queryForm.imei"
							filterable
							remote
							reserve-keyword
							placeholder="请输入"
							remote-show-suffix
							:remote-method="remoteMethod"
							:loading="imeiLoading"
						>
							<el-option v-for="item in imeiOptions" :key="item.id" :label="item.imei" :value="item.id" />
						</el-select> -->
						<el-input v-model="state.queryForm.imei" placeholder="请输入IMEI号"></el-input>
					</el-form-item>
					<el-form-item label="时间" prop="createTime">
						<el-date-picker
							:end-placeholder="$t('syslog.inputEndPlaceholderTip')"
							:start-placeholder="$t('syslog.inputStartPlaceholderTip')"
							range-separator="To"
							type="datetimerange"
							v-model="state.queryForm.createTime"
							value-format="YYYY-MM-DD HH:mm:ss"
						/>
					</el-form-item>
					<el-form-item>
						<el-button formDialogRef icon="search" type="primary" @click="getDataList">
							{{ $t('common.queryBtn') }}
						</el-button>
						<el-button icon="Refresh" formDialogRef @click="resetQuery">{{ $t('common.resetBtn') }}</el-button>
					</el-form-item>
				</el-form>
			</el-row>
			<el-table
				:data="state.dataList"
				v-loading="state.loading"
				border
				:cell-style="tableStyle.cellStyle"
				:header-cell-style="tableStyle.headerCellStyle"
			>
				<!-- <el-table-column type="selection" width="40" align="center" /> -->
				<el-table-column type="index" label="#" width="40" />
				<el-table-column prop="deviceUniqueId" label="设备编码" show-overflow-tooltip width="160" />
				<el-table-column prop="content" label="请求参数" :show-overflow-tooltip="{ popperClass: 'max-w-[380px]' }" />
				<el-table-column prop="createTime" label="时间" show-overflow-tooltip width="160" />
				<!-- <el-table-column label="操作" width="150">
					<template #default="scope">
						<el-button icon="edit-pen" text type="primary" v-auth="'platform_deviceLog_edit'" @click="formDialogRef.openDialog(scope.row.id)"
							>编辑</el-button
						>
						<el-button icon="delete" text type="primary" v-auth="'platform_deviceLog_del'" @click="handleDelete([scope.row.id])">删除</el-button>
					</template>
				</el-table-column> -->
			</el-table>
			<pagination @size-change="sizeChangeHandle" @current-change="currentChangeHandle" v-bind="state.pagination" />
		</div>

		<!-- 编辑、新增  -->
		<form-dialog ref="formDialogRef" @refresh="getDataList(false)" />
	</div>
</template>

<script setup lang="ts" name="systemDeviceLog">
import { BasicTableProps, useTable } from '/@/hooks/table';
import { fetchList } from '/@/api/admin/deviceLog';
import { fetchListAll } from '/@/api/platform/basicDevice';

// 引入组件
const FormDialog = defineAsyncComponent(() => import('./form.vue'));
// 定义查询字典

// 定义变量内容
const formDialogRef = ref();
// 搜索变量
const queryRef = ref();
interface ListItem {
	id: string;
	imei: string;
	deviceTypeId: string;
	deviceModelId: string;
}
const imeiOptions = ref<ListItem[]>([]);
// 多选变量
const multiple = ref(true);
const imeiLoading = ref(false);

const state: BasicTableProps = reactive<BasicTableProps>({
	queryForm: {},
	pageList: fetchList,
	descs: ['create_time'],
});

//  table hook
const { getDataList, currentChangeHandle, sizeChangeHandle, sortChangeHandle, downBlobFile, tableStyle } = useTable(state);

// 清空搜索条件
const resetQuery = () => {
	// 清空搜索条件
	queryRef.value?.resetFields();
	// 清空多选
	getDataList();
};
const remoteMethod = (query: string) => {
	if (query) {
		imeiLoading.value = true;
		fetchListAll({ imeiLike: query })
			.then((res) => {
				imeiOptions.value = res.data;
			})
			.finally(() => {
				imeiLoading.value = false;
			});
	} else {
		imeiOptions.value = [];
	}
};
</script>
